<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view clearfix ">
      <el-row>
        <el-col class="sjjName">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{dataForm1.sjjName}}</el-col>
      </el-row>
      <el-row>
        <el-col class="datasetId">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;集合ID:&nbsp;{{dataForm1.datasetId}}</el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8"
                style="padding: 8px"
                v-for="(item, index) in state.dataList"
                :key="index">
          <el-card :body-style="{ padding: '10px' }"
                   style="height: 150px">
            <el-row style="padding: 0 0 10px 0">
              <el-col :span="3"
                      class="col-id"><span>#{{index}}</span></el-col>
              <el-col :span="9"></el-col>
              <el-col :span="12"><span class="align-id">ID:&nbsp;{{ item._id }}</span></el-col>

            </el-row>

            <el-row style="text-align:center;width: 100%; padding-top: 10px;"
                    class="row-border-topset clearfix">
              <el-col :span="24">
                <el-tooltip placement="top"
                            effect="customized"
                            open-delay="300"
                            popper-class="tooltip-width">
                  <div slot="content">
                    <b class="tooltip-content">{{item.q}}{{item.a}}</b>
                  </div>
                  <template #content>
                    <div class="content"
                         style="">
                      <p style="font-size:16px; ">{{item.q}}{{item.a}}</p>
                    </div>
                  </template>
                </el-tooltip>
              </el-col>

            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <pagination @size-change="sizeChangeHandle"
                  @current-change="currentChangeHandle"
                  v-bind="state.pagination" />
    </div>

    <!-- 编辑、新增  -->
    <form-dialog ref="formDialogRef"
                 @refresh="getDataList(false)" />

  </div>
</template>

<script setup lang="ts" >
import { BasicTableProps, useTable } from '/@/hooks/tableDataSort';
import { datasetList } from '/@/api/know/zhishiku';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useDict } from '/@/hooks/dict';
import { useRoute } from 'vue-router';
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
// 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
// 定义查询字典

const { model_sort_stauts } = useDict('model_sort_stauts');

const dialogVisible = ref(false);

// 定义变量内容
const formDialogRef = ref();
const router = useRouter();

const data = reactive({
	isHovered: false,
});

const handleMouseOver = () => {
	data.isHovered = true;
	alert('3');
};

// 搜索变量
const queryRef = ref();
const showSearch = ref(true);

const route = useRoute();
const dataForm1 = reactive({
	datasetId: '',
	sjjName: '',
});
dataForm1.datasetId = route.query.sjjid;
dataForm1.sjjName = route.query.sjjName;

// 多选变量
const selectObjs = ref([]) as any;
const multiple = ref(true);

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		datasetId: dataForm1.datasetId,
	},
	pageList: datasetList,
});
console.log(state);

//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
	// 清空搜索条件
	queryRef.value?.resetFields();
	// 清空多选
	selectObjs.value = [];
	getDataList();
};

const deleteById = () => {
	console.log();
};

// 导出excel
const exportExcel = () => {
	downBlobFile('/model/modelSort/export', Object.assign(state.queryForm, { ids: selectObjs }), 'modelSort.xlsx');
};

// 多选事件
const selectionChangHandle = (objs: { id: string }[]) => {
	selectObjs.value = objs.map(({ id }) => id);
	multiple.value = !objs.length;
};

// 删除操作
const handleDelete = async (id: string) => {
	try {
		await useMessageBox().confirm('此操作将永久删除');
	} catch {
		return;
	}

	try {
		await delObjs(id);
		getDataList();
		useMessage().success('删除成功');
	} catch (err) {
		useMessage().error(err.msg);
	}
};
</script>
<style >
.align-id {
	background: #ffffff;
	border-radius: 4px 4px 4px 4px;
	border: 0 solid #e4e7ed;
}

.row-border-topset {
	height: 0px;
	border-top: 1px solid #dddddd;
	height: 140px; /* 设置div的高度 */
	overflow-y: scroll; /* 启用纵向滚动条 */
}
.row-border-topset ::-webkit-scrollbar {
	width: 0.1px;
}
.row-border-topset::-webkit-scrollbar-thumb {
	background-color: #f1f1f1;
}

.layout-padding-auto {
	height: 0px;
	border-top: 1px solid #dddddd;
	height: 140px; /* 设置div的高度 */
	overflow-y: scroll; /* 启用纵向滚动条 */
}
.layout-padding-auto ::-webkit-scrollbar {
	width: 0.1px;
}
.layout-padding-auto ::-webkit-scrollbar-thumb {
	background-color: #f1f1f1;
}

.col-id {
	text-align: center;
	background: #ecf5ff;
	border: 1px solid #e4e7ed;
	color: #409eff;
}
.sjjName {
	padding: 10px 10px 20px 0;
	height: 16px;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 16px;
	color: #333333;
	line-height: 0px;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.datasetId {
	padding: 10px 10px 20px 0;
	height: 14px;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	font-size: 14px;
	color: #999999;
	line-height: 0px;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.tooltip-width .content p {
	max-width: 1500px; /* 根据需要设置宽度 */
}
.tooltip-content {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	font-size: 14px;
	color: #333333;
	line-height: 0px;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.el-popper.is-customized {
	/* Set padding to ensure the height is 32px */
	padding: 6px 12px;
	background: linear-gradient(90deg, #f0f2f5, #f0f2f5);
}

.el-popper.is-customized .el-popper__arrow::before {
	background: linear-gradient(45deg, #e7e7e7, #f0f2f5);
	right: 0;
}
</style>